import React, { Component } from 'react'
import ProtoTypes from "prop-types"
import {nanoid} from "nanoid"
import './index.css'
export default class index extends Component {
    static propTypes = {
        addTodo: ProtoTypes.func.isRequired
    }
    handelAdd = (event) => {
        const {addTodo} = this.props
        const {target,keyCode} = event
        if(!target.value.trim()) return
        if(keyCode !== 13) return
        const todoObj = {id:nanoid(),name: target.value,isComplete: false}
        addTodo(todoObj)
        target.value = ""
    }
    render() {
        return (
            <div className="todo-header">
                <input onKeyUp={this.handelAdd} type="text" placeholder="请输入你的任务名称，按回车键确认" />
            </div>
        )
    }
}
